<html>
<head>
	<meta charset="utf-8">
	<title>登录</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/css/login.css" media="all" />

	<script
			src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
	<script
			src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
</head>

<script type="text/javascript">
    $(document).ready(function() {
        // validate the comment form when it is submitted
        $("#form-login").validate({
            rules : {
                username : {
                    required : true,
                    minlength : 2,
                },
                password : {
                    required : true,
                    minlength : 2
                },
                verify : {
                    required : true,
                    minlength : 4
                }
            },
            messages : {
                username : {
                    required : "请输入用户名",
                    minlength : "用户名至少由两个字符组成"
                },
                password : {
                    required : "请输入密码",
                    minlength : "密码长度不能小于 2 个字符"
                },
                verify : {
                    required : "请输入验证码",
                    minlength : "验证码长度为4个字符"
                }
            }

        });
    });
</script>
<script type="text/javascript">
    function gup(name) {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regexS = "[\\?&]" + name + "=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(location.pathname);
        if (results == null) {
            return location.pathname;
        } else {
            return results[1];
        }
    }
</script>
<script type="text/javascript">
    $.validator.setDefaults({
        submitHandler : function() {
            $.post(
                // 接收数据的页面
                '/api/login',
                // 传给后台的数据，多个参数用&连接或者使用json格式数据：{a:'value1',b:'value2'}
                {
                    username : $("#username").val(),
                    password : $("#password").val(),
                    verify : $("#verify").val()
                }, function(data) {

                    if (data.code == 200) {
                        location.href = "/boot-weirdor.html";
                    } else if (data.code == 400) {
                        alert(data.msg);
                        location.reload();
                    }
                },
                // 默认返回字符串，设置值等于json则返回json数据
                'json').error(function() {
                alert("登录失败，请稍后再试。");
            });
        }
    });
</script>
<style type="text/css">
	.error {
		color:BLACK;
	}
</style>
<body>
	<div class="video_mask"></div>
	<div class="login">
	    <h1>boot-weirdor登录</h1>
	    <form class="layui-form" id="form-login" name="form-login">
	    	<div class="layui-form-item">
				<input class="layui-input" id="username" name="username" placeholder="用户名" lay-verify="required" type="text" autocomplete="off">
		    </div>
		    <div class="layui-form-item">
				<input class="layui-input"  id="password" name="password" placeholder="密码" lay-verify="required" type="password" autocomplete="off">
		    </div>
		    <div class="layui-form-item form_code">
				<input class="layui-input"  id="verify" name="verify" placeholder="验证码" lay-verify="required" type="text" autocomplete="off">
				<div class="code"><img src="/verify" width="116" height="36"
									   onclick="this.src=('/verify?reload='+(new Date()).getTime())"></div>
		    </div>
			<button class="layui-btn login_btn" lay-submit="" lay-filter="login">登录</button>
		</form>
	</div>
	<script type="text/javascript" src="/layui/layui.js"></script>
	<script type="text/javascript" src="login.js"></script>
</body>
</html>